import React, { useState } from 'react';
import { Box, ListButton, Modal, ModalHeader, SecondaryButton, Text } from '@nova-hf/ui';
import Authentication from 'beta/store/authentication';
import { formatDate, formatPrice } from 'beta/utils/helpers';
import { useTranslation } from 'beta/utils/i18n';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { Adjustment, Charge, useContractPeriodsQuery } from 'typings/graphql';

import { SectionHeader } from '../../../thjonustur/[serviceId]/comoponents/SectionHeader';

type ContractPeriodsContainerProps = {
  authentication?: Authentication;
};

const ContractPeriodsContainer = ({ authentication }: ContractPeriodsContainerProps) => {
  const { t } = useTranslation('containers');
  const router = useRouter();
  const isStaff = authentication?.isStaff;
  const contractId = typeof router?.query?.contractId === 'string' ? router?.query?.contractId : '';
  const customerId = typeof router?.query?.customerId === 'string' ? router?.query?.customerId : '';
  const [showPeriods, setShowPeriods] = useState(true);
  const [showChargesModal, setShowChargesModal] = useState(false);
  const [charges, setCharges] = useState([] as Charge[]);
  const [showAdjustmentModal, setShowAdjustmentModal] = useState(false);
  const [adjustments, setAdjustments] = useState([] as Adjustment[]);

  const { data, loading, error } = useContractPeriodsQuery({
    variables: {
      input: {
        id: contractId,
        page: 1,
        per_page: 10,
      },
    },
  });

  const periods = data?.contractPeriods?.contractPeriods;

  const chargesClick = (charges: Charge[]) => {
    if (charges && charges?.length) {
      setCharges(charges);
    }

    setShowChargesModal(!showChargesModal);
  };

  const adjustmentsClick = (adjustments: Adjustment[]) => {
    if (adjustments && adjustments?.length) {
      setAdjustments(adjustments);
    }
    setShowAdjustmentModal(!showAdjustmentModal);
  };

  if (!data || error || loading || !periods?.length) {
    return null;
  }

  return (
    <Box>
      <Modal
        ariaLabel="ChargesModal"
        isVisible={showChargesModal}
        onVisibilityChange={(isVisible) => setShowChargesModal(isVisible)}
      >
        <ModalHeader title={t('contractPeriodsContainer.charges')} color="black100" icon="wallet" />
        {charges && charges?.length ? (
          <Box marginTop={10}>
            <Box borderBottomStyle="solid" color="black100" borderWidth="2px" paddingBottom={2}>
              <Box display="grid" gridTemplateColumns={3} gap={2} alignItems="center">
                <Text variant="eyebrowSmall">{t('contractPeriodsContainer.headers.amount')}</Text>
                <Text variant="eyebrowSmall">
                  {t('contractPeriodsContainer.headers.description')}
                </Text>
                <Text variant="eyebrowSmall">{t('contractPeriodsContainer.headers.key')}</Text>
              </Box>
            </Box>
            {charges?.map((charge) => (
              <React.Fragment key={charge?.id}>
                <Box display="grid" gridTemplateColumns={3} gap={2} alignItems="center" marginY={2}>
                  <Text variant="pSmallRegular">{formatPrice(charge?.amount ?? 0)}</Text>
                  <Text variant="pSmallRegular">{charge?.description}</Text>
                  <Text variant="pSmallRegular">{charge?.financeKey}</Text>
                </Box>
                <Box
                  borderColor="grey200"
                  borderBottomStyle="solid"
                  borderWidth="1px"
                  marginBottom={2}
                ></Box>
              </React.Fragment>
            ))}
          </Box>
        ) : (
          <Box margin={10}>
            <Text variant="pLargeBold">{t('contractPeriodsContainer.noCharges')}</Text>
          </Box>
        )}
      </Modal>
      <Modal
        ariaLabel="AdjustmentsModal"
        isVisible={showAdjustmentModal}
        onVisibilityChange={(isVisible) => setShowAdjustmentModal(isVisible)}
      >
        <ModalHeader
          title={t('contractPeriodsContainer.adjustments')}
          color="black100"
          icon="transfer"
        />
        {adjustments && adjustments?.length ? (
          <Box marginTop={10}>
            <Box borderBottomStyle="solid" color="black100" borderWidth="2px" paddingBottom={2}>
              <Box display="grid" gridTemplateColumns={4} gap={2} alignItems="center">
                <Text variant="eyebrowSmall">{t('contractPeriodsContainer.headers.amount')}</Text>
                <Text variant="eyebrowSmall">
                  {t('contractPeriodsContainer.headers.description')}
                </Text>
                <Text variant="eyebrowSmall">{t('contractPeriodsContainer.headers.key')}</Text>
                <Text variant="eyebrowSmall">{t('contractPeriodsContainer.headers.reason')}</Text>
              </Box>
            </Box>
            {adjustments?.map((adjustment) => (
              <React.Fragment key={adjustment?.id}>
                <Box display="grid" gridTemplateColumns={4} gap={2} alignItems="center" marginY={2}>
                  <Text variant="pSmallRegular">{formatPrice(adjustment?.amount ?? 0)}</Text>
                  <Text variant="pSmallRegular">{adjustment?.description}</Text>
                  <Text variant="pSmallRegular">{adjustment?.financeKey}</Text>
                  <Text variant="pSmallRegular">{adjustment?.reason}</Text>
                </Box>
                <Box
                  borderColor="grey200"
                  borderBottomStyle="solid"
                  borderWidth="1px"
                  marginBottom={2}
                ></Box>
              </React.Fragment>
            ))}
          </Box>
        ) : (
          <Box margin={10}>
            <Text variant="pLargeBold">{t('contractPeriodsContainer.noAdjustments')}</Text>
          </Box>
        )}
      </Modal>
      <Box display="flex" flexDirection="column" gap={2}>
        <Box>
          <SectionHeader
            headerTitle={t('contractPeriodsContainer.periods')}
            rightActionNode={
              <SecondaryButton
                colorScheme={'purple'}
                icon={showPeriods ? 'minus' : 'add'}
                text={
                  showPeriods ? t('contractItemsContainer.hide') : t('contractItemsContainer.show')
                }
                onClick={() => setShowPeriods(!showPeriods)}
              />
            }
          />
        </Box>
        {showPeriods && (
          <Box>
            <Box borderBottomStyle="solid" color="black100" borderWidth="2px" paddingBottom={2}>
              <Box display="grid" gridTemplateColumns={6} gap={2} alignItems="center">
                <Text variant="eyebrowSmall">{t('contractPeriodsContainer.headers.start')}</Text>
                <Text variant="eyebrowSmall">{t('contractPeriodsContainer.headers.end')}</Text>
                <Text variant="eyebrowSmall">{t('contractPeriodsContainer.headers.amount')}</Text>
                <Text variant="eyebrowSmall">{t('contractPeriodsContainer.charges')}</Text>
                {isStaff && (
                  <Text variant="eyebrowSmall">{t('contractPeriodsContainer.adjustments')}</Text>
                )}
                <Text variant="eyebrowSmall">{'Aðgerð'}</Text>
              </Box>
            </Box>
            {periods?.map((item) => (
              <React.Fragment key={item?.id}>
                <Box display="grid" gridTemplateColumns={6} gap={2} alignItems="center" marginY={2}>
                  <Text variant="pSmallRegular">
                    {item?.start
                      ? formatDate(item?.start, 'dd.MM.yyyy')
                      : t('contractDiscountsContainer.noDate')}
                  </Text>
                  <Text variant="pSmallRegular">
                    {item?.start
                      ? formatDate(item?.end, 'dd.MM.yyyy')
                      : t('contractDiscountsContainer.noDate')}
                  </Text>
                  <Text variant="pSmallRegular">{formatPrice(item?.totalCharge ?? 0)}</Text>
                  <ListButton
                    icon="plus"
                    text={t('contractPeriodsContainer.lookAt')}
                    onClick={() => {
                      chargesClick(item?.charges as Charge[]);
                    }}
                  />
                  {isStaff && (
                    <ListButton
                      icon="plus"
                      text={t('contractPeriodsContainer.lookAt')}
                      onClick={() => {
                        adjustmentsClick(item?.adjustments as Adjustment[]);
                      }}
                    />
                  )}
                  {!item?.isFinalized && (
                    <ListButton
                      icon="plus"
                      text={'Leiðrétta'}
                      onClick={() => {
                        router?.push(`/beta/${customerId}/askriftir/${contractId}/leidretting`);
                      }}
                    />
                  )}
                </Box>
                <Box
                  borderColor="grey200"
                  borderBottomStyle="solid"
                  borderWidth="1px"
                  marginBottom={2}
                ></Box>
              </React.Fragment>
            ))}
          </Box>
        )}
      </Box>
    </Box>
  );
};

export default inject('ui', 'authentication')(observer(ContractPeriodsContainer));